<template>
  <div>
    <ConTitle :info="info"></ConTitle>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>设备概览</span>
      </div>
      <div class="text item">
        <span class="sp1">计划：</span>
        <span class="sp">按量计费</span>
      </div>
      <div class="text item">
        <span class="sp1">状态：</span>
        <span class="sp">正常</span>
      </div>
    </el-card>

    <el-card class="box-card">
      <span>添加充值金额</span>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="账户余额"> {{ balance }} </el-form-item>
        <el-form-item label="充值金额" prop="amount">
          <el-input type="text" v-model.number="ruleForm.amount"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="desc">
          <el-input type="text" v-model="ruleForm.desc"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="充值" @click="submitForm()">充值</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import ConTitle from "@/components/ConTitle.vue";
import { $feeAdd, $feeSelect } from "@/api/index";
export default {
  name: "AccountMsg",
  data() {
    return {
      info: {
        path: "计费/",
        text: "账户信息",
        msg: "以分组的形式管理节点设备，提供了搜索、添加新的群组、重命名、移动设备等功能。",
      },
      ruleForm: {
        amount: "",
        desc: "",
        type: "recharge",
      },
      rules: {
        amount: [
          { required: true, message: "请输入充值金额", trigger: "blur" },
          { type: "number", message: "充值金额请填写数字", trigger: "blur" },
        ],
        desc: [{ required: true, message: "请输入备注", trigger: "blur" }],
      },
      balance: 0,
    };
  },
  components: {
    ConTitle,
  },
  mounted() {
    this.getBalance();
  },
  methods: {
    async getBalance() {
      var res = await $feeSelect();
      this.balance = res.data.data.balance.toFixed(2);
    },
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          $feeAdd(this.ruleForm).then((res) => {
            console.log(res);
            if (res.data.msg == "success") {
              this.$message({
                message: "恭喜你，充值成功",
                type: "success",
                duration: 500,
              });

              this.getBalance();
              this.ruleForm.amount = "";
              this.ruleForm.desc = "";
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.sp1 {
  font-weight: 900;
}
.sp {
  margin-left: 80px;
}
.box-card {
  margin-top: 10px;
}
.text {
  margin-top: 20px;
}
.inputt {
  margin-left: 50px;
  width: 300px;
}
.inputt1 {
  margin-left: 75px;
  width: 300px;
}
.beizhu {
  margin-top: 10px;
}
</style>